<template>
	<view class="page-box">
		<view style="height: 100rpx;">
			<u-navbar bgColor="transparent" height="50">
				<view class="u-nav-slot flex-align-center" slot="left">
					<image src="../../static/images/common/fanhui-bai.png" @click="goBack"></image>
				</view>
			</u-navbar>
		</view>
		<view class="content">
			<view class="day-list flex-center">
				<view class="title-box flex-center">
					<image class="title" src="../../static/images/common/qiandaojiangli.png"> </image>
				</view>
				<view class="day-list-son flex-center">
					<view class="flex-center">
						<view class="flex-between  left-item-box" style="flex-wrap: wrap;">
							<view class="left-item flex-center" v-for="item in dayList"
								:class="item.isTrue === true ? 'signed-in' : ''"
								:style="item.day <= 3 ? 'margin-bottom:17rpx' : ''" :key="item.day"
								@click="toSign(item)">
								<span>第{{ item.day }}天</span>
								<image class="money-icon" src="../../static/images/common/qiandao-money.png"> </image>
								<image class="add-money" src="../../static/images/common/+5.png"> </image>
							</view>
						</view>
						<view class="right-item flex-center">
							<span class="senven">第7天</span>
							<image class="seven-gift" src="../../static/images/common/liwu-bj.png"> </image>
							<image class="mystery-gift" src="../../static/images/common/shenmi.png"> </image>
							<span class="tip-seven">可领取50-70</span>
						</view>
					</view>
					<view class="btm-tip">本周内每天签到有金币，连续签到有额外金币。</view>
				</view>

			</view>
			<view class="di-yuan flex-between">
				<image class="money-left" src="../../static/images/common/qian.png"> </image>
				<image class="money-right" src="../../static/images/common/qian.png"> </image>
			</view>
		</view>
	</view>
</template>

<script>
import {
	getSignRecordApi,
	signRecordSignApi
} from '@/api/signIn/index.js'
import { created } from '../../uni_modules/uview-ui/libs/mixin/mixin';
export default {
	data() {
		return {
			dayList: [{
				day: 1,
				isTrue: true
			}, {
				day: 2,
				isTrue: false
			}, {
				day: 3,
				isTrue: false
			}, {
				day: 4,
				isTrue: false
			}, {
				day: 5,
				isTrue: false
			}, {
				day: 6,
				isTrue: false
			},],
			currentValue: 0,
			actions: [{
				text: '字母浏览-人教版'
			},
			{
				text: '字母浏览-译林版'
			},
			{
				text: '字母听写'
			},
			],
			rightList: [{
				text: '带娃打完'
			}]
		};
	},
	// 打卡记录
	created() {
		this.getSignRecord();
	},
	methods: {
		// 获取打开记录
		async getSignRecord() {
			const {
				data: res
			} = await getSignRecordApi({});
			console.log(res, '打卡记录');
			if (res.data && res.data.length > 0) {
				console.log('dwd');

			} else {
				this.dayList.forEach(item => {
					item.isTrue = false
				});
			}
		},
		// 打卡
		async toSign(item) {
			
			if (item.isTrue === true) {
				return
			}
			const { data: res } = await signRecordSignApi();
			console.log(res, '打卡');
			if (res.code === 1) {
				uni.$u.toast(res.msg);
			}
			this.getSignRecord()

		},
		goBack() {
			this.$common.goBack()
		},
		handleClick() {

		},
		handleSelect() {

		}
	}
}
</script>

<style lang="scss" scoped>
@function px_2_vw($px) {
	@return #{$px * 100 / 1920}vw;
}

.page-box {
	background-image: url('../../static/images/common/qiandao-bj.png');
	background-size: 100% 100%;
	display: flex;
	flex-direction: column;
}

.u-nav-slot {
	image {
		width: px_2_vw(79);
		height: px_2_vw(79);
	}
}

.content {
	display: flex;
	align-items: end;
	flex: 1;
	position: relative;
	padding: 0rpx;
	// background-image: url('../../static/images/common/qiandao-c-bj.png');
	// background-size: 100% 100%;
	margin-bottom: 80rpx;

	.title-box {
		width: px_2_vw(675);
		height: px_2_vw(119);
		background-image: url('../../static/images/common/tou.png');
		background-size: 100% 100%;
		position: absolute;
		top: -(px_2_vw(119));
		left: 21.5%;
	}

	.title {
		width: px_2_vw(288);
		height: px_2_vw(100);

		// position: absolute;

	}

	.day-list {
		width: px_2_vw(1158);
		height: px_2_vw(750);
		position: absolute;
		left: 50.5%;
		top: px_2_vw(490);
		transform: translate(-50%, -50%);
		// background: #fff;
		// padding: 48rpx 53rpx;

		background-image: url('../../static/images/common/di-lan.png');
		background-size: 100% 100%;


		.btm-tip {
			color: #000;
			font-size: px_2_vw(24);
			margin-top: 24rpx;
			width: 100%;
			padding-left: 98rpx;
		}

		.day-list-son {
			// border: 1rpx solid #000;
			width: px_2_vw(1073);
			height: px_2_vw(694);

			background-image: url('../../static/images/common/di-bai.png');
			background-size: 100% 100%;
			flex-direction: column;

		}
	}

	.left-item-box {
		width: px_2_vw(740);
	}

	.left-item {
		width: px_2_vw(226);
		height: px_2_vw(251);
		border-radius: 46rpx;
		background: #60B4FD;
		flex-direction: column;
		color: #fff;
		font-size: px_2_vw(36);
		padding: 30rpx 0 22rpx 0;
		position: relative;

		// margin-right: 17rpx;
		.money-icon {
			width: px_2_vw(91);
			height: px_2_vw(91);
			margin-top: 13rpx;
		}

		.add-money {
			width: px_2_vw(92);
			height: px_2_vw(95);
			margin-top: -20rpx;

		}
	}

	.signed-in::after {
		width: 100%;
		height: 100%;
		top: 0;
		position: absolute;
		content: '';
		background-image: url('../../static/images/common/duihao-bj.png');
		background-size: 100% 100%;
	}



	.right-item {
		width: px_2_vw(226);
		height: px_2_vw(518);
		border-radius: 46rpx;
		background: #60B4FD;
		margin-left: 17rpx;
		flex-direction: column;
		font-size: px_2_vw(36);

		.senven {
			color: #000;
		}

		.seven-gift {
			width: px_2_vw(226);
			height: px_2_vw(214);
			margin: 56rpx 0;
		}

		.tip-seven {
			font-weight: 600;
			font-size: px_2_vw(20);
			margin-top: 56rpx;
		}

		.mystery-gift {
			width: px_2_vw(192);
			height: px_2_vw(67);
			margin-top: -120rpx;
		}
	}

	.di-yuan {
		width: 100%;
		height: px_2_vw(222);
		background-image: url('../../static/images/common/di-yuan.png');
		background-size: 100% 100%;
		padding: 0 30rpx;

		image {
			width: px_2_vw(328);
			height: px_2_vw(328);
			margin-bottom: 170rpx;
		}

	}
}
</style>